To Start, create an account with GitHub. Utilize an email address you can access readily to secure the GitHub verification code:
Signup at GitHub
Once complete, navigate to Glitch and utilize the GitHub signup option and authentication process:
Glitch signup/login
Next, navigate to Sentinel Hub | Sentinel Playground. Here we will create two satellite images for download. Navigate within Sentinel Playground to 2 locations of your choice and download their respective image.
Sentinel Hub Playground Interface
Download Image Option at Sentinel Hub Playground
Following the satellite image downloads, open the properties of the images and copy the dimensions of each image:
Image Dimensions
Image Dimensions
Next, we will resize the aspect ratio of each image by 50%. There are many online aspect calculators; we will use THIS ONE.
Original Dimensions
50% reduction | note the reduced width and height
Note: if using the Class 4 inclass data, the first image original dimensions are
1975 X 1102; reduction is987 x 551. The second image original dimensions are1975 X 1159; reduction is987 x 579.
In this second demo, we will navigate to Glitch, create a new website
project and upload the 2 image files to the assets
directory within the site.
Note: this workflow can also be accomplished with our adopted code editor - VS Code. The advantage of Glitch is its ease-of-use; further, for this inclass demonstration lab, a website structure and it’s HTML is conveniently ‘out-of-the-box’, ready for us to revise and use.
First, find the Hello Website option and enact that
instance:
Chose Hello Website
This will create a project shell which we can expand in the upper
left toggle arrow. We will be using the index.html page and
the assets directory:
Access site structure
Next, navigate to the Assets directory and upload both
original satellite images:
Upload Image Assets
Once uploaded, click on each image and Copy URL and
place into a text document:
Copy image URL
With the images uploaded and the URL of each recorded,
navigate to the index.html page in the director tree to the
left:
Access index.html
Within the index.html find the
<body> and </body> tag section:
Body section within index.html
Find the first default image in the index.html:
<img src="https://cdn.glitch.com/"
/>
Image Search Position
Replace the existing image URL with the first satellite
image URL. Then copy in the second satellite image utilizing the same
img src tag structure, but replacing the first image
URL with the second image URL. Once complete,
preview the work live via Share > Live Site
web address.
Next, we will alter the img src tag structure for both
images so as to decrease the image size by the 50% aspect ratio
reduction. This will give us better sized images for the site. The
format is simply width and height declarations, separated by 1 space,
both set within the img src opening and closing tags.
<img src="https://cdn.glitch.com/"
width="" height=""
/>
Addition of width and height modifications
Again, check the live site to ensure the modification was a success.
Within the same index.html page, modify existing HTML
elements, remove some HTML elements and add in a couple new
elements.
Utilize the following HTML GUIDE to inform your modifications.
In addition to our image insertions, we can also embed CARTO maps via
an iframe element. The basic code structure is as follows.
Like img src, further modifications can be made within the
element tags:
<iframe src="https://www.example.com" title="text for title"></iframe>
To start, navigate to your CARTO account and chose one of your
current CARTO maps. Continue to the Publish section and
copy the embed code:
Add this HTML element snippet
to your
index.html under your satellite images within the
body section. Live preview your map insertion into the web
project to ensure your embed addition is working as
expected.